<template>
    <div class="encryption">
        <a-card title="刷新Token">
            <a-row :gutter="[12, 12]">
                <a-col :span="10">
                    <h3 class="white_space">更换代理地址</h3>
                    <div class="flex_display">
                        <a-input
                            placeholder="代理地址"
                            v-model:value="proxyData.proxyUrl"
                        ></a-input
                        >&nbsp;
                        <a-button type="primary" @click="handleReplaceProxy">
                            确定更换
                        </a-button>
                    </div>
                </a-col>
                <a-col span="4"></a-col>
                <a-col :span="10">
                    <h3 class="white_space">更换后的代理地址</h3>
                    <a-input
                        type="text"
                        disabled
                        placeholder="代理地址"
                        v-model:value="proxyData.proxyUrl"
                    />
                </a-col>
            </a-row>
            <a-divider />
            <a-row :gutter="[12, 12]">
                <a-col :span="10">
                    <a-textarea
                        :auto-size="{ minRows: 8, maxRows: 12 }"
                        type="text"
                        v-model:value="formState.encry"
                        placeholder="用户信息"
                    />
                </a-col>
                <a-col
                    :span="4"
                    style="
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    "
                >
                    <div class="btn_all">
                        <div>
                            <a-button
                                @click="handelRefreshToken"
                                type="primary"
                            >
                                获取token
                            </a-button>
                        </div>
                    </div>
                </a-col>
                <a-col :span="10">
                    <a-textarea
                        :auto-size="{ minRows: 8, maxRows: 12 }"
                        type="text"
                        v-model:value="formState.decrypt"
                        placeholder="token"
                    />
                </a-col>
            </a-row>
        </a-card>
    </div>
</template>

<script>
import { message } from "ant-design-vue";
import { ref, onMounted, defineComponent, reactive } from "vue";

export default defineComponent({
    setup() {
        const formState = reactive({
            encry: "",
            decrypt: "",
        });
        const proxyData = reactive({
            proxyUrl: "",
        });

        const handleReplaceProxy = () => {
            if (proxyData.proxyUrl.trim() === "") {
                message.warning("请输入正确的代理地址");
            } else {
                console.log("更换代理地址", proxyData.proxyUrl);
            }
        };

        const handelRefreshToken = () => {
            if (proxyData.proxyUrl.trim() === "" && formState.encry) {
                message.warning("请输入正确的代理地址和用户信息");
            } else {
                console.log("获取token");
            }
            
        };

        onMounted(() => {
            const obj = {
                username: "黄新元",
                password: "123456",
            };
            formState.encry = JSON.stringify(obj);
            proxyData.proxyUrl = "http://10.238.120.207:8082/"; // 初始化代理地址
        });

        return {
            formState,
            proxyData,
            handleReplaceProxy,
            handelRefreshToken,
        };
    },
});
</script>

<style>
.flex_display {
    display: flex;
    align-items: center;
}
.flex_display .ant-input[disabled] {
    background: rgba(255, 255, 255);
    color: #000;
}
.btn_all .ant-btn {
    width: 120px;
}
.btn_center {
    margin: 10px 0px 10px 0px;
}
.white_space {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>
